<template>
  <div>
    <el-card :bordered="false" shadow="never" class="i-table-no-border">
      <div class="detailHead">
        <div class="full">
          <div class="order_icon"><span class="iconfont icon-dingdan"></span></div>
          <div class="text">
            <div class="title">{{ formItem.itemType == 1?'服务订单': '次卡订单' }}</div>
            <div>订单编号：{{formItem.ordersn }}</div>
          </div>
        </div>
        <ul class="list">
          <li class="item">
            <div class="title">订单状态</div>
            <div>
              <div v-if="formItem.status == -20 " class="value2">已退款</div>
              <div v-else-if="formItem.status == -10 " class="value1">退款中</div>
              <div v-else-if="formItem.status == 0" class="value3">待付款</div>
              <div v-else-if="formItem.status == 5" class="value3">待预约</div>
              <div v-else-if="formItem.status == 10" class="value3">待接单</div>
              <div v-else-if="formItem.status == 20" class="value3">已接单</div>
              <div v-else-if="formItem.status == 25" class="value3">服务中</div>
              <div v-else-if="formItem.status == 30" class="value3">已完成</div>
              <div v-else-if="formItem.status == 40" class="value3">已结单</div>

              <div v-else class="value4">退款中</div>
            </div>
          </li>

          <li class="item">
            <div class="title">支付方式</div>
            <div>{{ formItem.payTypeDesc }}</div>
          </li>
          <li class="item">
            <div class="title">支付时间</div>
            <div>{{ formItem.payTimeDesc }}</div>
          </li>
        </ul>
      </div>

      <el-tabs v-model="activeName">
        <el-tab-pane label="订单信息" name="detail">
          <div class="ivu-description-list-title mt10">用户信息</div>
          <el-row class="mb10">
            <el-col :span="12">用户昵称：{{ formItem.linkName }}</el-col>
          </el-row>
          <el-row class="mb10">
            <el-col :span="12">联系电话：{{ formItem.linkMobile || '' }}</el-col>
            <el-col :span="12">服务地址：{{ formItem. userAddress|| '' }}</el-col>
          </el-row>
          <el-divider style="margin: 20px 0 !important" />

          <div class="ivu-description-list-title">订单信息</div>

          <el-row class="mb10">
            <!-- <el-col :span="12">积分抵扣：{{formItem.integral_deduction}}</el-col> -->
            <el-col :span="12">实际支付：{{formItem.payPrice||0}}</el-col>
          </el-row>
          <el-row class="mb10">
            <el-col
              :span="12"
              class="fontColor3 mb10"
              v-if="[-20,-10].includes(formItem.status)"
            >退款金额：{{formItem.payPrice||0}}</el-col>
            <!-- <el-col :span="12" class="fontColor3 mb10">使用积分：{{formItem.c}}</el-col>
            <el-col :span="12" class="fontColor3 mb10">赠送积分：{{formItem.gain_integral}}</el-col>
            <el-col :span="12" class="fontColor3 mb10">优惠卷抵扣：{{ formItem.coupon_price }}</el-col> -->
            <el-col :span="12" class="mb10">创建时间：{{formItem.addTimeDesc}}</el-col>
            <el-col :span="12" class="mb10">支付时间：{{formItem.payTimeDesc}}</el-col>
          </el-row>
          <el-divider style="margin: 20px 0 !important" />
          <div class="ivu-description-list-title">项目信息</div>
          <el-row class="mb10">
            <el-col :span="12" class="fontColor3 mb10">项目名称：{{formItem.itemName}}</el-col>
            <el-col :span="12" class="fontColor3 mb10">项目规格：{{formItem.itemSpecData.specName}}</el-col>
            <el-col :span="12" class="mb10">单位：{{formItem.itemSpecData.unitName}}</el-col>
            <el-col :span="12" class="mb10">单价：{{formItem.itemSpecData.unitPrice}}</el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="company">
          <div class="ivu-description-list-title" v-if="formItem.companyId > 0 ">门店信息</div>
          <el-row class="mb10" v-if="formItem.companyId > 0 ">
            <el-col :span="12" class="fontColor3 mb10">门店名称：{{ formItem.company.title }}</el-col>
            <el-col :span="12" class="fontColor3 mb10">负责人：{{ formItem.company.linkName }}</el-col>
            <el-col :span="12" class="mb10">手机号：{{ formItem.company.linkMobile }}</el-col>
            <el-col :span="12" class="mb10">
              可获得佣金：
              {{formItem.companyFee}}元
            </el-col>
          </el-row>
          <el-divider style="margin:20px 0 !important" v-if="formItem.status >= 20" />
          <div class="ivu-description-list-title" v-if="formItem.status >= 20">员工信息</div>
          <el-row class="mb10" v-if="formItem.itemType == 1 && formItem.status >= 20">
            <el-col :span="12" class="fontColor3 mb10">员工姓名：{{ formItem.staffName }}</el-col>
            <el-col :span="12" class="fontColor3 mb10" v-if="formItem.staffData.recordPhone">手机号：{{ formItem.staffData.recordPhone }}</el-col>
            <el-col :span="12" class="fontColor3 mb10" v-if="formItem.status == 40">
              可获得佣金：
              {{formItem.costFee}}元
            </el-col>
          </el-row>
          <el-divider
            style="margin:20px 0 !important"
            v-if="formItem.signRemark  && formItem.itemType == 1 && formItem.status >= 25"
          />
          <template
            v-if="formItem.signRemark  && formItem.itemType == 1 && formItem.status >= 25"
          >
            <div class="ivu-description-list-title">签到信息</div>
            <el-row class="mb10">
              <el-col :span="12" class="fontColor3 mb10">签到日期：{{ formItem.signTimeDesc }}</el-col>
              <el-col :span="12" class="fontColor3 mb10">服务人员备注：{{ formItem.signRemark }}</el-col>
              <el-col :span="12" class="fontColor3 mb10">
                签到图片：
                <div class="tabBox_img" @click="show('tabBox_sign_img')" v-viewer>
                  <img
                    v-for="src in formItem.signImgsArr"
                    v-lazy="src"
                    style="margin-right:5px"
                    :key="src"
                  />
                </div>
              </el-col>
            </el-row>
          </template>
          <el-divider
            style="margin:20px 0 !important"
            v-if="formItem.status >= 30 && formItem.itemType != 2 && formItem.staffMark"
          />
          <template
            v-if="formItem.status >= 30 && formItem.itemType != 2 && formItem.staffMark"
          >
            <div class="ivu-description-list-title">完成信息</div>
            <el-row class="mb10">
              <el-col :span="12" class="fontColor3 mb10">完成时间：{{ formItem.handeTimeDesc }}</el-col>
              <el-col :span="12" class="fontColor3 mb10">服务人员备注：{{ formItem.staffMark }}</el-col>

              <el-col :span="12" class="fontColor3 mb10">
                完成图片:
                <div class="tabBox_img" @click="show('tabBox_staff_img')">
                  <img v-lazy="formItem.staffImgsArray[0]" v-if="formItem.staffImgsArray" />
                </div>
                <div class="tabBox_staff_img" v-show="false" v-viewer>
                  <img v-for="src in formItem.staffImgsArray" :src="src" :key="src" />
                </div>
              </el-col>
            </el-row>
          </template>
          <el-divider style="margin:20px 0 !important" v-if="formItem.status >= 30 && formItem.itemType != 2 && formItem.staffMark"/>
          <div class="ivu-description-list-title">备注信息</div>
          <el-row class="mb10">
            <el-col :span="20">用户备注：{{ formItem.remark }}</el-col>
          </el-row>
          <el-row class="mb10">
            <el-col :span="20">平台备注：{{ formItem.remarkSaler }}</el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="日志" name="log">
          <el-table :data="log_list">
            <!-- <el-table-column label="操作人类型" #default="{row}" min-width="120">{{row.opUserTypeName}}</el-table-column> -->
            <el-table-column label="操作人" #default="{row}" min-width="120">{{row.operationUserName}}</el-table-column>
            <el-table-column label="操作时间" #default="{row}" min-width="120">{{row.operationTimeStr}}</el-table-column>
            <el-table-column label="操作内容" #default="{row}" min-width="120">{{row.logContent}}</el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
  
  <script>
import { getOrderInfoApi, getOrderLogApi } from '@/api/onsite';
export default {
  name: 'orderDetail',
  props: {
    orderId: Number,
  },
  data() {
    return {
      activeName: 'detail',
      order_info: null,
      formItem: {},
      log_list: [],
    };
  },
  mounted() {
    this.getOrderInfo();
    this.getOrderLog();
  },
  methods: {
    onBaseSelect(name) {
      this.base_name = name;
    },
    // 订单日志
    getOrderLog() {
      getOrderLogApi(this.orderId )
        .then(async (res) => {
          this.log_list = res;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 订单详情
    getOrderInfo() {
      getOrderInfoApi(this.orderId)
        .then(async (res) => {
          this.formItem = res;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 图片显示
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },

    cancel(name) {
      this.modals = false;
      this.$emit('clearId');
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .head {
    padding: 35px 0;

    .full {
      display: flex;

      .iconfont {
        color: #1890FF;

        &.sale-after {
          color: #90ADD5;
        }
      }

      .text {
        align-self: center;
        flex: 1;
        min-width: 0;
        padding-left: 12px;
        border: 0;
        font-size: 13px;
        line-height: 13px;
        color: #606266;

        .title {
          margin-bottom: 10px;
          font-weight: 500;
          font-size: 16px;
          line-height: 16px;
          color: rgba(0, 0, 0, 0.85);
        }
      }

      .ivu-btn {
        margin-left: 12px;

        &:first-child {
          display: inline-block;
          border-color: #1890FF;
          margin-left: 0;
          background-color: #1890FF;
          color: #FFFFFF;
        }

        &:nth-child(2) {
          display: inline-block;
          border-color: #19BE6B;
          background-color: #19BE6B;
          color: #FFFFFF;
        }

        &:nth-child(3) {
          display: inline-block;
        }

        &:focus {
          box-shadow: none;
        }
      }

      .ivu-dropdown {
        margin-left: 12px;

        &:nth-child(n+5) {
          display: inline-block;
        }

        .ivu-btn {
          border-color: #DCDEE2;
          background-color: #FFFFFF;
          color: #515A6E;
        }
      }
    }

    .list {
      display: flex;
      margin-top: 20px;
      overflow: hidden;
      list-style: none;

      .item {
        flex: none;
        width: 200px;
        font-size: 14px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.85);

        .title {
          margin-bottom: 12px;
          font-size: 13px;
          line-height: 13px;
          color: #666666;
        }

        .value1 {
          color: #F56022;
        }

        .value2 {
          color: #1BBE6B;
        }

        .value3 {
          color: #1890FF;
        }

        .value4 {
          color: #6A7B9D;
        }

        .value5 {
          color: #F5222D;
        }
      }
    }
  }

  >>> .ivu-tabs {
    color: rgba(0, 0, 0, 0.85);

    .ivu-tabs-bar {
      border-bottom: 0;
      margin-bottom: 0;
      background-color: #F5F7FA;
    }

    .ivu-tabs-nav-container {
      font-size: 13px;
    }

    .ivu-tabs-nav-wrap {
      margin-bottom: 0;
    }

    .ivu-tabs-ink-bar {
      display: none;
    }

    .ivu-tabs-tab {
      padding: 7px 19px !important;
      margin-right: 0;
      line-height: 26px;
    }

    .ivu-tabs-tab-active {
      background-color: #FFFFFF;
      color: rgba(0, 0, 0, 0.85);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #1890FF;
      }
    }

    .ivu-tabs-tabpane {
      padding: 15px;

      &:first-child {
        padding: 0 25px;
      }
    }
  }

  .ivu-description-list-title {
    margin-bottom: 30px;
    color: #17233d;
    font-weight: bold;
    font-size: 14px;
  }

  .product-data {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-data .image {
    width: 50px !important;
    height: 50px !important;
  }

  .line2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
  